<template>
    <div id="GoodsManageAdd">
        <el-row>
            <el-col :xs="24" :sm="{span: 20, offset: 2}" :md="{span: 18, offset: 3}" :lg="{span: 16, offset: 4}" :xl="{span: 20, offset: 1}">
                <div class="grid-content bg-purple">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="商品图像:">
                            <el-upload class="upload-demo" :auto-upload="false" action="/" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :before-upload="beforeUpload">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="商品ID:" prop="id">
                            <el-input v-model.number="ruleForm.id"></el-input>
                        </el-form-item>
                        <el-form-item label="商品名称:" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="商品价格:" prop="price">
                            <el-input v-model.number="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量:" prop="num">
                            <el-input v-model.number="ruleForm.num"></el-input>
                        </el-form-item>
                        <el-form-item label="商品类型:" prop="types">
                            <el-select v-model="ruleForm.types" placeholder="请选择商品类型">
                                <el-option label="书桌" value="shanghai"></el-option>
                                <el-option label="沙发" value="beijing"></el-option>
                                <el-option label="双人床" value="beijing"></el-option>
                                <el-option label="台灯" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品状态:" prop="state">
                            <el-radio-group v-model="ruleForm.state">
                                <el-radio label="已上架"></el-radio>
                                <el-radio label="未上架"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import * as url from '../api/ygr_goods_api.js'
export default {
    name: "GoodsManageAdd",
    data() {
        return {
            ruleForm: {
                id: '',
                name: '',
                price: '',
                num: '',
                types: '',
                state: ''
            },
            fileList: [],
            rules: {
                id: [
                    { required: true, message: 'id不能为空', trigger: 'blur' },
                    { type: 'number', message: 'id必须为数字值', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                price: [
                    { required: true, message: '价格不能为空', trigger: 'blur' },
                    { type: 'number', message: '价格必须为数字值', trigger: 'blur' }
                ],
                num: [
                    { required: true, message: '数量不能为空', trigger: 'blur' },
                    { type: 'number', message: '数量必须为数字值', trigger: 'blur' }
                ],
                types: [
                    { required: true, message: '请选择商品类别', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择上架状态', trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.fileList)
                    console.log(this.ruleForm)
                    this.$axios.post(url.ADDGOODS,{
                        goodsImg:this.fileList,
                        goodsId:this.ruleForm.id,
                        goodsName:this.ruleForm.name,
                        goodsPrice:this.ruleForm.price,
                        goodsNum:this.ruleForm.num,
                        goodsType:this.ruleForm.types,
                        state:this.ruleForm.state
                    }).then(res=>{
                        this.$message(res.data.message)
                    }).catch(err=>{
                        console.log(err)
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.handleRemove()
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            console.log(fileList)
            return this.$confirm(`确定移除 ${ file.name }？`);

        },
        beforeUpload(file) {
            console.log(file);
            return file
        }
    }
}
</script>
<style scoped>
</style>